<template>
    <div class="text-edit padding-10">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="文本">
                <el-input v-model="form.text"></el-input>
            </el-form-item>
            <el-form-item label="大小">
                <el-radio-group v-model="form.fontSize">
                    <el-radio label="18px">大(18px)</el-radio>
                    <el-radio label="14px">中(14px)</el-radio>
                    <el-radio label="12px">小(12px)</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="位置">
                <el-radio-group v-model="form.textAlign">
                    <el-radio label="left">左边</el-radio>
                    <el-radio label="center">居中</el-radio>
                    <el-radio label="right">右边</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit"> 确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import {createProp} from '../util/util';
    import {findParentComponent} from "../util/findComponent";

    export default {
        props: {
            item: createProp([Object], {default: {}})
        },
        data() {
            return {
                form: {
                    text: "文本",
                    textAlign: "left",
                    fontSize: "14px",
                }
            }
        },
        mounted() {
            if(this.item&&this.item.props){
                this.form = this.item.props
            }
        },
        methods: {
            onSubmit() {
                this.item
                var parnet = findParentComponent(this, 'editAllParent')
                var index = parnet.resultList.findIndex(item => item.id === this.item.id)
                parnet.resultList[index].props = {
                    ...this.form
                }
                parnet.resultList[index].isShowEdit = false
                parnet.resultList = parnet.resultList
            }
        }
    }
</script>
<style lang="scss">
    .mint-search {
        height: 53px;
    }
</style>
<style lang="scss" scoped>
    .text {
        padding-top: 10px;
        padding-bottom: 10px;
    }
</style>
